<script setup>

import SubjectProgressItem from '../../components/SubjectProgressItem.vue';
import Pagination from '/src/components/Pagination_lxw.vue';
import { useRouter } from 'vue-router';
import { ref } from 'vue'

const router = useRouter()

const percentage = [0, 25, 50, 75, 100]

</script>
<template>
    <div class="homepage-container">
        <div class="homepage">
            <div class="title">
                <h1>{{ $t('homepage.title') }}</h1>
            </div>
            <div class="my-subjects-progress">
                <template v-for="(item, index) in percentage" :key="index">
                    <span></span>
                    <SubjectProgressItem :percentage="item" style="width: 634px; height: 160px; margin: 20px 75px;" />
                </template>


            </div>
        </div>

    </div>



</template>
<style scoped>
.homepage-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 90px;
    width: 100%;
}

.homepage {
    width: 100%;
}

.title {
    margin: 17px 0;
}

.title h1 {
    font-family: Source Han Sans CN;
    font-size: 30px;
    color: #707070;
    height: 50px;
    line-height: 50px;
}

.my-subjects-progress>span {
    display: block;
    width: 100%;
    height: 1px;
    border-width: 1px 0 0 0;
    border-style: solid;
    border-color: #707070;
}
</style>